<template>
  <div>
    <el-dialog :title="title" v-model="open" width="1200px" append-to-body :close-on-click-modal="false">
      <el-card>
        <itemInformationForm ref="basicInfor" :redgerType="redgerType" :span="span" :labelPosition="labelPosition"
          @innerOuter="innerOuter" />
      </el-card>
      <el-card v-if="redgerType !== '1' && redgerType !== '14'">
        <redgerAmoutForm ref="redgerAmount" :redgerType="redgerType" :span="span" :labelPosition="labelPosition">
        </redgerAmoutForm>
      </el-card>
      <template v-else-if="redgerType == '14'">
      </template>
      <template v-else>
        <workAmountForm ref="redgerAmount" :span="span" :labelPosition="labelPosition"></workAmountForm>
      </template>
      <el-card v-if="innerOuterType == 2">
        <uploadForm ref="uploadInfor" :redgerType="redgerType" :span="span" :labelPosition="labelPosition"></uploadForm>
      </el-card>
      <el-card>
        <otherForm ref="otherInfor" :redgerType="redgerType" :span="span" :labelPosition="labelPosition"></otherForm>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="js">
import { ref, nextTick } from 'vue';
import { addRedger, updateRedger, getRedger } from '@/api/income.js'
import itemInformationForm from './itemInformation.form.vue';
import uploadForm from './uploadForm.vue';
import otherForm from './otherForm.vue';
import workAmountForm from './workAmount.vue';
import redgerAmoutForm from './redgerAmout.form.vue'
const { proxy } = getCurrentInstance();

const props = defineProps(['open', 'title', 'update', 'updateId', "redgerType", "innerOuter"])
const emit = defineEmits(['update:open', 'update:update'])

//获取各表单
const basicInfor = ref()
const uploadInfor = ref()
const otherInfor = ref()
const redgerAmount = ref()

const span = ref(4)
const labelPosition = ref('top')
//父组件传过来的数据
const open = ref()
const title = ref()
const update = ref()
const updateId = ref()
const redgerType = ref()
const innerOuterType = ref()
// 弹框打开
watch(props, (newProps) => {
  open.value = newProps.open
  title.value = newProps.title
  update.value = newProps.update
  updateId.value = newProps.updateId
  redgerType.value = newProps.redgerType
  reset()
}), { immediate: true }
// 获取当前台账数据
const getredgerData = (updateId) => {
  if (updateId) {
    getRedger(updateId).then(response => {
      proxy.$refs["basicInfor"].form = response.data
      proxy.$refs["uploadInfor"].form = response.data
      proxy.$refs["otherInfor"].form = response.data
      proxy.$refs["redgerAmount"].form = response.data
    });
  } else {
    proxy.$refs["basicInfor"].form = {};
    proxy.$refs["uploadInfor"].form = {};
    proxy.$refs["otherInfor"].form = {};
    proxy.$refs["redgerAmount"].form = {};
  }
}
//监听open的变化回传给父组件
watch(open, (newOpen) => {
  emit('update:open', newOpen)
})

// 展开的模块
const activeName = ref([])
// 表单重置
async function reset() {
  // 设置模块默认展开
  activeName.value = ['1', '2', '3', '4', '5', '6']
  await nextTick()
  getredgerData(updateId.value)
};
// 时间格式转化
const formatDate = (dateString) => {
  const dateObj = new Date(dateString);
  const year = dateObj.getFullYear();
  const month = String(dateObj.getMonth() + 1).padStart(2, '0');
  const day = String(dateObj.getDate()).padStart(2, '0');
  return `${year}-${month}`;
}
// 查询表格数据
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  redgerType: redgerType
})
const innerOuter = (data) => {
  innerOuterType.value = data
  console.log("innerOuterType", innerOuterType)
}
const uploadMonth = ref('')
// 提交
const submitForm = async () => {
  basicInfor.value = proxy.$refs["basicInfor"].form
  uploadInfor.value = proxy.$refs["uploadInfor"].form
  otherInfor.value = proxy.$refs["otherInfor"].form
  redgerAmount.value = proxy.$refs["redgerAmount"].form
  if (uploadInfor.value.uploadMonth) {
    uploadMonth.value = formatDate(uploadInfor.value.uploadMonth)
  } else {
    uploadMonth.value = ''
  }
  //提交的数据
  const requestBody = Object.assign({},
    basicInfor.value,
    uploadInfor.value,
    otherInfor.value,
    redgerAmount.value,
    { uploadMonth: uploadMonth.value },
    { workloadMonth: formatDate(basicInfor.value.workloadMonth) },
    { redgerType: redgerType.value }
  );
  //验证并提交数据
  const valid = await validForm();
  if (valid) {
    if (update.value) {
      updateRedger(requestBody).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false
        proxy.$bus.emit('RefreshlLedger', queryParams.value)
      });
    } else {
      addRedger(requestBody).then(response => {
        proxy.$modal.msgSuccess("新增成功");
        open.value = false
        proxy.$bus.emit('RefreshlLedger', queryParams.value)
      });
    }
  } else {
    proxy.$modal.msgError("必填项未填");
  }

}
// 取消
const cancel = () => {
  open.value = false
  reset();
}
// 表单验证
const validForm = async () => {
  const TorF = await proxy.$refs["basicInfor"].validateForm();
  return TorF;
}
reset()

</script>
<style>
.el-card
{
  border: none;
  margin-bottom: 10px;
}
</style>